<template>
	<view class="content">
		<view
			style="font-size: 34rpx;margin-bottom: 40rpx;margin-top: 30rpx;display: flex;align-items: center;flex-direction: column;">
			<image src="/static/images/checked.png" style="width: 120rpx;height: 120rpx;margin-top: 120rpx;" mode="">
			</image>
			<view style="margin-top: 25rpx;">
				{{show?'输入原密码':'支付密码已设置'}}
			</view>
		</view>

		<view style="width: 100%;" v-if="show">
			<view style="width: 80%;height: 1rpx;background: #fff;margin: 20rpx auto;"></view>
			<view style="width: 100%;display: flex;justify-content: center;">
				<u-message-input disabled-keyboard :value="value1" dot-fill width="80" maxlength="6"></u-message-input>
			</view>
			<view style="width: 80%;height: 1rpx;background: #fff;margin: 20rpx auto;"></view>
			<view style="width: 100%;position: fixed;bottom: 0rpx;left: 0rpx;">
				<u-table :padding="'0px 0px'">
					<u-tr>
						<u-td>
							<view @click="tapthd(1)" class="ttgd">
								1
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(2)" class="ttgd">
								2
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(3)" class="ttgd">
								3
							</view>
						</u-td>
					</u-tr>
					<u-tr>
						<u-td>
							<view @click="tapthd(4)" class="ttgd">
								4
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(5)" class="ttgd">
								5
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(6)" class="ttgd">
								6
							</view>
						</u-td>
					</u-tr>
					<u-tr>
						<u-td>
							<view @click="tapthd(7)" class="ttgd">
								7
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(8)" class="ttgd">
								8
							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(9)" class="ttgd">
								9
							</view>
						</u-td>
					</u-tr>
					<u-tr>
						<u-td>
							<view class="ttgd" style="background: #e2e2e2;">

							</view>
						</u-td>
						<u-td>
							<view @click="tapthd(0)" class="ttgd">
								0
							</view>
						</u-td>
						<u-td>
							<view @click="backspace" class="ttgd" style="background: #e2e2e2;">
								<image src="/static/images/ttui.png" style="width: 50rpx;" mode="widthFix"></image>
							</view>
						</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>

		<view v-if="!show" style="width: 46%;padding: 25rpx;padding-top: 0rpx;margin: 160rpx auto;">
			<u-button @click="saveuser" type="primary">修改密码</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value0: '',
				value1: '',
				show: false,
				
			}
		},
		onShow() {
			const user = this.$store.state.user.user
			if (user.paypswd) {
				
			} else {
				uni.redirectTo({
					url: "/pages/user/setpaypswd"
				})
			}
		},
		methods: {
			tapthd: async function(e) {
				this.value1 = this.value1 + e
				if (this.value1.length >= 6) {
					const user = this.$store.state.user.user
					if (user.paypswd != this.value1) {
						uni.showToast({
							title: "原始密码输入错误",
							icon: "none"
						})
						this.value0 = ''
						this.value1 = ''
						this.show = false
						return
					} else {
						this.show = false
						uni.navigateTo({
							url:"/pages/user/setpaypswd"
						})
					}
				}
			},
			backspace: function() {
				if (this.step == 0) {
					if (!this.value0) {
						return
					}
					this.value0 = this.value0.substring(0, this.value0.length - 1)
				} else {
					if (!this.value1) {
						return
					}
					this.value1 = this.value1.substring(0, this.value1.length - 1)
				}
			},
			saveuser: function() {
				this.show = true
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #f3f3f3;
		padding: 25rpx;
	}

	.ttgd {
		display: flex;
		height: 100rpx;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 36rpx;
		color: #222;
	}
</style>